<template>
  <!-- 弹框开始 -->
  <uni-popup ref="popup" type="bottom" :showPopup="true">
    <view class="like">
      <view class="like-tittle">
        <view class="like-tittle-box">
          <image class="like-tittle-img" :src="host + Detail.icon" mode="aspectFill"></image>
          <view class="">
            <view class="product-price">￥<text class="plan-price-text">{{ priceAll }} </text>元&nbsp;/
              &nbsp;&nbsp;{{ amountAll }}个</view>
          </view>
        </view>

        <i class="iconfont icon-searchclose" @click="close" />
      </view>
      <view class="like-desc1" v-if="showSpecificationConditionsFlag">
        <view class="like-desc-t">
          <view class="like-desc-t-title">
            <!-- 日期 -->
          </view>
          <scroll-view scroll-x="true" class="scroll-container">
            <view class="product-list">
              <view v-for="(item, index) in specificationConditions" :key="index"
                :class="['product-item', index == descIndex ? 'product-item-active' : '']" @click="checkFun(index)">
                <text v-if="item.amount > 0" class="spec-text-sum">x{{ item.amount }}</text>
                <text class="product-name">{{ item.name }}</text>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <scroll-view class="like-desc" scroll-y="true">
        <!-- <view class="like-desc-t">
					<view class="like-desc-t-title">
						规格
					</view>
					<view class="like-desc-t-box">
						<view
							:class="['like-desc-t-box-list',specificationsIndex==index?'like-desc-t-box-list-active':'']"
							v-for="item,index in specificationsAll[specificationConditions[descIndex].name]" @click="checkMoreFun(index)">
							<text class="spec-text-sum" v-if="item.amount">x{{item.amount}}</text>
							{{item.name}}
						</view>
					</view>
				</view> -->
        <view
          v-if="specificationsAll && specificationConditions[descIndex] && specificationsAll[specificationConditions[descIndex].name] && specificationsAll[specificationConditions[descIndex].name][specificationsIndex] && specificationsAll[specificationConditions[descIndex].name]">
          <view class="like-desc-b"
            v-for="group, index in specificationsAll && specificationsAll[specificationConditions[descIndex].name] && specificationsAll[specificationConditions[descIndex].name][specificationsIndex] && specificationsAll[specificationConditions[descIndex].name]"
            :key="index">
            <view class="like-desc-t-title">
              {{ group.name }}
            </view>
            <!-- 购物车 -->
            <view class="cart-wrapper" v-if="group.items">
              <view class="cart-item" v-for="(item, idx) in group.items" :key="idx">
                <view class="cart-item-left">
                  <view class="spec-text"><text v-if="item.amount > 0" class="spec-text-sum">x{{ item.amount }}</text>
                    {{ item.itemName }}</view>

                </view>
                <view class="cart-item-right">
                  <view class="cart-item-left-info">
                    <!-- <text class="price">¥{{item.currentUnitPrice}}</text> -->
                    <text class="sum">(库存{{ item.amountOriginal }})</text>
                  </view>
                  <view class="stepper">
                    <button class="btn minus" :disabled="item.amount <= 0" @click="delFun(index, idx)">-</button>
                    <input class="input" type="number" v-model.number="item.amount" disabled />
                    <button class="btn plus" :disabled="item.amount >= item.amountMax"
                      @click="addFun(index, idx)">+</button>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <!-- 底部操作栏 -->
      <view class="footer" v-if="type == 'cart'">
        <button class="add-cart-btn btn-class" @click="toCart('addToCart')">确认加购</button>
      </view>
      <view class="footer1" v-show="type == 'buy'">
        <view class="footer1-box">
          <view class="footer1-box-l">
            <view class="footer1-box-l-t">
              已选<text class="footer1-box-l-t-text">{{ amountAll }}</text>个
            </view>
            <!-- <view class="footer1-box-l-b" v-if="contactArr.length>0">
							联系人：
							<uniPicker ref="uniPicker" class="pickerBox" @p="pBtn" /> &nbsp;
						</view>
						<view class="footer1-box-l-b" v-else @click="goContact">
							联系人：暂无联系人
							<image src="@/static/img/godtail.png" mode="widthFix" class="arrow-icon"></image>
						</view> -->
          </view>
          <view class="footer1-box-r">
            <view class="">
              商品金额：
            </view>
            <view class="product-price">￥<text class="plan-price-text">{{ priceAll }} </text>元</view>

          </view>
        </view>
        <button class="add-cart-btn btn-class" @click="toCart('submitToCart')">立即下单</button>
      </view>
    </view>
  </uni-popup>
</template>
<script>
import {
  mapGetters
} from 'vuex'
import uniPicker from '@/components/uni_picker/uni_picker.vue'
export default {
  components: {
    uniPicker
  },
  data() {
    return {
      imgUrl: this.$apiFun.imgUrl,
      host: this.$apiFun.host,
      descIndex: 0,
      specificationsIndex: 0,
      quantity: 1,
      price: 2,
      Detail: {},
      contactArr: [],
      specificationsAll: {}, //规格集合
      specifications: [],
      specificationConditions: [],
      showSpecificationConditionsFlag: true, //是否展示scroll-view的条件 
      specificationsArr: [], //选中的 规格
      inventories: [],
      priceAll: 0,
      amountAll: 0,
      type: '', //cart 加购，buy 购买
      paramObj: {
        name: ''
      },
      img: 'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg'
    }
  },
  computed: {
    ...mapGetters([
      'addrObj'
    ]),
  },
  mounted() { },
  methods: {
    //初始化方法
    async userDetail() {
      var that = this;
      var data = {}
      const {
        contactsList
      } = await this.$apiFun.getApi(this.$api.userDetailApi, data)

      let contactArr = contactsList.map((item) => {
        return {
          id: item.realname,
          name: item.realname
        }
      })
      if (contactArr.length > 0) {
        this.contactArr = contactArr
        this.paramObj.name = contactArr[0].name
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs['uniPicker'].changeShow({
              array: contactArr,
              id: contactArr[0].name,
            })
          }, 1000)
        })
      }

    },
    // 设置观影人
    goContact() {
      uni.navigateTo({
        url: '/page_wallet/peopleList'
      })
    },
    async goodsFun() {
      let data = await this.$apiFun.getApi(
        this.$api.goodsInventoryApi, {
        goodsId: this.Detail.id,
        specificationItems: [],
        specificationCondition: ''
      }
      )
    },
    // 规格项选择
    checkMoreFun(index) {
      this.specificationsIndex = index
    },
    pBtn(e) {
      this.paramObj.name = e.name
    },
    open(data, type) {
      this.priceAll = 0
      this.type = type //cart 加购，buy 购买
      this.Detail = {}
      this.Detail = JSON.parse(JSON.stringify(data))
      this.setData()
      this.$refs.popup.open()
      if (type == 'buy') {
        // 回调历史记录接口
        this.userDetail()

      }
    },
    // 初始化数据
    setData() {
      let {
        specifications,
        specificationConditions,
        inventories,
      } = this.Detail.specificationInventories
      if (!specificationConditions || specificationConditions && specificationConditions.length == 0) {
        specificationConditions = []
        specificationConditions.push('a')
        this.showSpecificationConditionsFlag = false
      }
      // 条件
      this.specificationConditions = specificationConditions.map((item) => {
        return {
          name: item,
          amount: 0
        }
      })
      this.specifications = specifications
      this.inventories = inventories
      // 初始化 
      specificationConditions.map((item, index) => {
        this.specificationsAll[item] = []
        this.setItemFun(this.specificationConditions, this.specifications, this.inventories, index)
      })
    },


    setItemFun(specificationConditions, specifications, inventories, index) {
      specifications.forEach((item) => {
        item.amount = 0 //各个规格加购后的数量 ：门票服务（123）-酒店服务（123）-换机服务 （123）
        item.items.forEach((row) => {
          inventories.map((i) => {
            // 3月20号:接机服务#商务专车
            let key = specificationConditions[index].name + ':' + item.name + '#' +
              row
                .itemName
            let Ikey = ''
            if (!this.showSpecificationConditionsFlag) {
              Ikey = 'a' + i.key
            } else {
              Ikey = i.key
            }
            if (Ikey == key) {
              const containsSubstring = this.Detail.TicketStr.some(TicketStritem => item.name.includes(TicketStritem));
              // 门票服务最大可选择3个
              row.amountMax = containsSubstring ? 3 : i.amount
              row.amountOriginal = i.amount //商品库存数量
              row.amount = 0 //实际选择的数量
              row.currentUnitPrice = i.currentUnitPrice / 100 //现单价(分转元 除以100)
              row.originalUnitPrice = i.originalUnitPrice / 100 //原单价(分转元 除以100)
            }
          })
        })
      })
      this.specificationsAll[this.specificationConditions[index].name] = JSON.parse(JSON.stringify(
        specifications))
      // 初始化赋值-暂时注释
      // if (this.Detail.selectedSpecificationGroups) {
      // 	// 条件
      // 	this.setItemFunCall(index)
      // 	// 初始化条件 选中的数量
      // }
      this.$forceUpdate()
    },
    setItemFunCall(index) {
      let specifications = JSON.parse(JSON.stringify(this.specifications))
      let inventories = JSON.parse(JSON.stringify(this.inventories))
      let selectedSpecificationGroups = JSON.parse(JSON.stringify(this.Detail.selectedSpecificationGroups))
      selectedSpecificationGroups.map((group, groupIndex) => {
        console.log('this.specificationConditions[groupIndex]', this.specificationConditions, groupIndex)
        this.specificationConditions[groupIndex].amount = group.amount
        specifications.forEach((item) => {
          // item.amount = 0//各个规格加购后的数量 ：门票服务（123）-酒店服务（123）-换机服务 （123）
          item.items.forEach((row) => {
            inventories.map((i) => {
              // 3月20号:接机服务#商务专车
              let key = this.specificationConditions[index].name + ':' +
                item.name + '#' + row
                  .itemName
              let Ikey = ''
              if (!this.showSpecificationConditionsFlag) {
                Ikey = 'a' + i.key
              } else {
                Ikey = i.key
              }
              if (Ikey == key) {
                row.amountOriginal = i.amount //商品库存数量
                // row.amount = 0//实际选择的数量
                row.currentUnitPrice = i.currentUnitPrice /
                  100 //现单价(分转元 除以100)
                row.originalUnitPrice = i.originalUnitPrice /
                  100 //原单价(分转元 除以100)
                let keyCall = group.specificationCondition + ':' +
                  group.specificationItemGroup[0].name + '#' + group
                    .specificationItemGroup[0].itemName
                console.log('key-------', keyCall, key)
                if (keyCall == key) {
                  console.log('key', key, group.amount)
                  row.amount = group.amount //实际选择的数量
                }
              }
            })
          })
        })
      })
      // 条件
      this.specificationsAll[this.specificationConditions[index].name] = specifications
      specifications.map((item, idx) => {
        // this.specificationsIndex 就是index
        this.amountFunAll(index, idx)
      })
    },
    // 时间项选择
    checkFun(val) {
      //重置规格下标
      this.specificationsIndex = 0;
      this.descIndex = val
      let specificationsArr = this.specificationsAll[this.specificationConditions[this.descIndex].name]
      if (specificationsArr.length > 0) { } else {
        this.specificationsAll[this.specificationConditions[this.descIndex].name] = []
        this.specificationsAll[this.specificationConditions[this.descIndex].name] = JSON.parse(JSON.stringify(
          this.specifications))
        // 初始化赋值
        if (this.Detail.selectedSpecificationGroups) {
          // 条件
          this.setItemFunCall()
        }
      }
      this.$forceUpdate()
    },
    close() {
      this.Detail = {}
      this.contactArr = []
      this.specificationsAll = {} //规格集合
      this.specifications = []
      this.specificationConditions = []
      this.specificationsArr = [] //选中的 规格
      this.inventories = []
      this.$refs.popup.close()
    },
    // 添加商品
    addFun(index, idx) {
      let name = this.specificationConditions[this.descIndex].name
      let goods = this.specificationsAll[name][index]
      goods.items.forEach((item, i) => {
        if (i != idx) {
          item.amount = 0
        }
      })
      goods.items[idx].amount++
      this.amountFun()
      this.$forceUpdate()
    },
    // 减少商品
    delFun(index, idx) {
      let name = this.specificationConditions[this.descIndex].name
      let goods = this.specificationsAll[name][index]
      goods.items.forEach((item, i) => {
        if (i != idx) {
          item.amount = 0
        }
      })
      goods.items[idx].amount--
      this.amountFun()
      this.$forceUpdate()
    },
    // 当前规格下 商品总数量
    amountFun() {
      let amount = 0
      let specificationConditionsAmount = 0
      let name = this.specificationConditions[this.descIndex].name
      let goods = this.specificationsAll[name][this.specificationsIndex]
      goods.items.map((item) => {
        amount += item.amount
      })
      this.specificationsAll[name].map((item, index) => {
        item.items.map((group) => {
          specificationConditionsAmount += group.amount
        })
      })
      this.specificationConditions[this.descIndex].amount = specificationConditionsAmount
      this.priceArr()
      this.$set(this.specificationsAll[this.specificationConditions[this.descIndex].name][this
        .specificationsIndex
      ], 'amount', amount)

    },
    // 所有规格下 商品总数量
    amountFunAll(descIndex, index) {
      let amount = 0
      let goods = this.specificationsAll[this.specificationConditions[descIndex].name][index]
      goods.items.map((item) => {
        amount += item.amount
      })
      this.priceArr()
      this.$set(this.specificationsAll[this.specificationConditions[descIndex].name][index], 'amount', amount)

    },
    // 所有规格商品总数量
    priceArr() {
      // // 这里一定要用Decimal来初始化
      // this.totalPrice = new Decimal(0)
      // // 循环遍历数组
      // this.medicine.map(item => {
      //   // 数量
      //   const num = new Decimal(item.num);
      //   // 单价
      //   const price = new Decimal(item.price);
      //   // 数量*单价
      //   const product = num.times(price);
      //   // 只有用Decimal初始化后，才会有plus这个方法
      //   // 求总价
      //   this.totalPrice = this.totalPrice.plus(product);
      // })
      // // 把totalPrice转为数字类型
      // this.totalPrice = this.totalPrice.toNumber();

      // 当 specifications 或其任何子属性变化时执行
      // Decimal: 加 add, 减 sub, 乘 mul, 除 div, 求余 modulo
      const Decimal = this.$Decimal
      let price = new Decimal(0)
      let amount = 0
      for (let key in this.specificationsAll) {
        this.specificationsAll[key].map((item) => {
          item.items.filter((row) => {
            return row.amount > 0
          }).map((row) => {
            amount += row.amount
            const num1 = new Decimal(row.currentUnitPrice);
            const num2 = new Decimal(row.amount);
            let num3 = (num1.mul(num2).toNumber())
            num3 = new Decimal(num3)
            price = num3.add(price).toNumber()
          })
        })
      }

      //  this.specifications.map((item)=>{
      // 	item.items.filter((row)=>{
      // 		return row.amount>0
      // 	}).map((row)=>{
      // 		amount+=row.amount
      // 		price+=(row.currentUnitPrice*row.amount)
      // 	})
      // })
      console.log('amount-------', amount)
      this.amountAll = amount
      this.priceAll = price
    },

    leadToSetPeople() {
      const that = this
      uni.showModal({
        title: '当前还未设置观影人',
        content: '前往设置？',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
            that.close()
            uni.navigateTo({
              url: '/page_wallet/peopleList'
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },

    // 商品加购
    async addToCart(array) {
      let param = {
        "goodsId": this.Detail.id,
        "specificationSelectionMode": this.Detail.specificationSelectionMode,
        "selectedSpecificationGroups": array
      }
      uni.showLoading()
      let data = await this.$apiFun.postApi(
        this.$api.cartAddToApi, param
      )
      uni.hideLoading()
      uni.showToast({
        title: '已加购',
        icon: 'none',
      })
      this.close()
      this.$emit('closeBtn')
    },
    async submitToCart(array) {
      let param = {
        "goodsId": this.Detail.id,
        "specificationSelectionMode": this.Detail.specificationSelectionMode,
        "selectedSpecificationGroups": array
      }
      uni.showLoading()
      await this.$apiFun.delApi(
        this.$api.emptyGoodsApi
      )
      let data = await this.$apiFun.postApi(
        this.$api.cartAddToApi, param
      )
      this.getData()
    },
    async getData() {
      let data = await this.$apiFun.getApi(
        this.$api.goodsGroupListApi,
      )
      data.forEach((item) => {
        item.goods.forEach((row) => {
          row.check = true
          row.selectedSpecificationGroups.forEach((list) => {
            list.check = true
            list.currentUnitPrice = list.currentUnitPrice / 100
          })
        })
      })
      uni.hideLoading()
      setTimeout(() => {
        this.submit1(data)
      }, 100)
    },
    // 跳转确认订单页面
    submit1(data) {
      this.$refs.popup.close()
      uni.navigateTo({
        url: '/page_wallet/payConfirm?data=' + encodeURIComponent(JSON.stringify(data))
      })
      return true
    },
    // async submitToCart(array) {
    // 	let param = {
    // 		"realname": this.paramObj.name,
    // 		"goodsList": [{
    // 			"goodsId": this.Detail.id,
    // 			"selectedSpecificationGroups": array
    // 		}]
    // 	}
    // 	uni.showLoading()
    // 	let data = await this.$apiFun.postApi(
    // 		this.$api.orderCreateApi, param
    // 	)

    // 	let res = await this.$apiFun.getApi(
    // 		this.$api.orderPrepayApi, {
    // 			tradeNo: data
    // 		}
    // 	)
    // 	// 支付api
    // 	// 支付api

    // 	try {

    // 		await this.$publicFun.payFun(res)

    // 		uni.navigateTo({

    // 			url: '/page_wallet/orderList'

    // 		})

    // 	} catch (e) {

    // 		uni.navigateTo({

    // 			url: '/page_wallet/orderList'

    // 		})

    // 	}
    // 	uni.hideLoading()
    // 	this.close()
    // 	this.$emit('submitBtn')
    // },
    toCart(type) {
      if (this.priceAll == 0) {
        uni.showToast({
          title: '请先选择商品~',
          icon: 'none'
        })
        return
      }
      if (type == 'submitToCart' && this.contactArr.length == 0) {
        this.leadToSetPeople()
        return
      }
      let array = []
      for (let key in this.specificationsAll) {
        this.specificationsAll[key].map((item) => {
          let arr = item.items.filter((row) => {
            return row.amount > 0
          }).map((i) => {
            return {
              specificationCondition: this.showSpecificationConditionsFlag ? key : '',
              specificationItemGroup: [{
                itemName: i.itemName,
                name: item.name
              }],
              amount: i.amount
            }
          })
          array = array.concat(arr)
        })
      }
      let param = {
        "realname": this.paramObj.name,
        "goodsList": [{
          "goodsId": this.Detail.id,
          "selectedSpecificationGroups": array
        }]
      }
      type == 'addToCart' ? this.addToCart(array) : this.submitToCart(array)
    }
  },
  onReachBottom() {

  },

}
</script>

<style scoped lang="less">
// 置顶弹框
.like {

  width: 100%;
  background-color: #FFFFFF;
  border-radius: 20rpx 20rpx 0 0;
  padding: 40rpx 0 0;
  height: 85vh;

  .scroll-container {
    white-space: nowrap;
    /* 防止换行 */
    width: 100%;
    padding: 10rpx 0 0rpx;

    .product-list {
      display: inline-flex;
      /* 横向排列 */
    }

    .product-item {
      min-width: 180rpx;
      height: 60rpx;
      padding: 0 10rpx;
      margin-right: 7rpx;
      border-radius: 6rpx;
      display: block;
      font-size: 28rpx;
      color: #5c5c5c;
      border: 2rpx solid #5c5c5c;
      position: relative;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;

      .spec-text-sum {
        position: absolute;
        top: -5rpx;
        left: -5rpx;
        padding: 2rpx 8rpx;
        border-radius: 15rpx;
        color: #ffffff;
        background: #f94d1b;
      }
    }

    .product-item-active {
      color: #fd4a21;
      border-radius: 6rpx;
      border: 2rpx solid #fd4a21;
      background-color: #faece8;


    }
  }

  .like-tittle {
    border-radius: 20rpx 20rpx 0 0;
    padding: 0 40rpx;
    box-sizing: border-box;
    width: 100%;
    height: 200rpx;
    font-size: 34rpx;
    color: #131313;
    justify-content: space-between;
    display: flex;
    align-items: flex-start;
    background: #fcfcfc;

    .iconfont {
      font-size: 40rpx;
    }

    .like-tittle-box {
      height: 200rpx;
      display: flex;
      align-items: center;

      .like-tittle-img {
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
      }

      .product-price {
        font-size: 20rpx;
        color: #e64340;
        font-weight: bold;
        padding-left: 10rpx;

        .plan-price-text {
          font-size: 40rpx;
          margin: 0 5rpx;

        }
      }
    }

  }

  .like-desc1 {
    padding: 0 40rpx;
    box-sizing: border-box;
    font-size: 25rpx;
    color: #5c5c5c;
    margin: 30rpx auto 20rpx;
    text-align: left;

  }

  .like-desc {
    padding: 0 40rpx;
    box-sizing: border-box;
    font-size: 25rpx;
    color: #5c5c5c;
    margin: 0 auto 200rpx;
    text-align: left;
    height: calc(85vh - 530rpx);

    .like-desc-t {
      margin-bottom: 15rpx;

      .like-desc-t-title {
        font-size: 28rpx;
        font-weight: bold;
        position: relative;

        .spec-text-sum {
          position: absolute;
          top: -10rpx;
          left: -10rpx;
          padding: 2rpx 8rpx;
          border-radius: 15rpx;
          color: #ffffff;
          background: #f94d1b;
        }
      }

      .like-desc-t-box {
        margin-top: 25rpx;
        justify-content: space-between;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .like-desc-t-box-list {
          width: 300rpx;
          height: 60rpx;
          justify-content: center;
          display: flex;
          align-items: center;
          background-color: #f6f6f6;
          margin-bottom: 22rpx;
          font-size: 24rpx;
          border-radius: 6rpx;
          position: relative;

          .spec-text-sum {
            position: absolute;
            top: -10rpx;
            left: -10rpx;
            padding: 2rpx 8rpx;
            border-radius: 15rpx;
            color: #ffffff;
            background: #f94d1b;
          }
        }

        .like-desc-t-box-list-active {
          background-color: #fd4a21;
          color: white;

        }
      }
    }

    .like-desc-b {
      margin-top: 35rpx;

      .like-desc-t-title {
        font-size: 28rpx;
        font-weight: bold;
      }

      .cart-wrapper {
        margin: 30rpx 0 0;

        .cart-item {
          background: white;
          // padding: 24rpx;
          margin-bottom: 20rpx;
          border-radius: 16rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .cart-item-left {
            .spec-text {
              display: block;
              font-size: 26rpx;
              color: #333;

              width: 240rpx;
              height: 60rpx;
              justify-content: center;
              display: flex;
              align-items: center;
              background-color: #f6f6f6;
              font-size: 24rpx;
              border-radius: 6rpx;
              position: relative;

              .spec-text-sum {
                position: absolute;
                left: 0;
                top: 0;
                margin-right: 5rpx;
                padding: 2rpx 8rpx;
                border-radius: 15rpx;
                color: #ffffff;
                background: #f94d1b;
              }
            }


          }

          .cart-item-right {
            text-align: right;
            width: 450rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .stepper {
              display: flex;
              align-items: center;
              margin-bottom: 12rpx;

              .btn {
                width: 50rpx;
                height: 50rpx;
                line-height: 46rpx;
                padding: 0;
                // border: 2rpx solid #ddd;
                border-radius: 8rpx;
                font-size: 32rpx;
                background: white;

                &.disabled {
                  opacity: 0.6;
                }
              }

              .input {
                width: 80rpx;
                height: 50rpx;
                margin: 0 12rpx;
                text-align: center;
                font-size: 28rpx;
                border: 2rpx solid #ddd;
                border-radius: 8rpx;
              }
            }

            .total {
              font-size: 28rpx;
              color: #ff4444;
            }

            .cart-item-left-info {
              display: flex;
              align-items: center;
              color: #9b999a;
              font-size: 20rpx;
              padding-left: 10rpx;

              .price {
                padding-right: 10rpx;
                margin-right: 10rpx;
                border-right: 1rpx solid #9b999a;
                height: 14rpx;
                line-height: 14rpx;
              }

              .sum {}
            }
          }
        }
      }



    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

  .add-cart-btn {
    background: #ff5000;
    color: #fff;
    border-radius: 50rpx;
  }
}

.footer1 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

  .pickerBox {
    color: #131313 !important;
  }

  .footer1-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22rpx;
    padding: 0 35rpx 20rpx;
    box-sizing: border-box;

    .product-price {
      font-size: 20rpx;
      color: #e64340;
      font-weight: bold;

      .plan-price-text {
        font-size: 40rpx;
        margin: 0 5rpx;

      }
    }

    /deep/.pickerBox {
      font-size: 22rpx;

    }

    .footer1-box-l {
      color: #a1a1a1;

      .footer1-box-l-t {
        margin-bottom: 15rpx;

        .footer1-box-l-t-text {
          color: #e64340;
        }
      }

      .footer1-box-l-b {
        display: flex;
        align-items: baseline;
        white-space: nowrap;

        .arrow-icon {
          width: 10rpx;
          height: 10rpx;
          margin-left: 10rpx;
        }

      }
    }

    .footer1-box-r {
      color: #3d3d3d;
      display: flex;
      align-items: baseline;

    }
  }

  .add-cart-btn {
    background: #ff5000;
    color: #fff;
    border-radius: 50rpx;
  }
}
</style>